<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>提交列表</title>
    <script language="JavaScript" src="/js/StatusInModal.js"></script>
    <script src="/js/pagination.js"></script>
    <link rel="stylesheet" href="/js/prettify/skins/sunburst.css">
</head>
<body>
<main class="ui container" height="100%" id="vue-solutions">
    <form class="ui form" v-on:submit.prevent="search()">
        <div class=" fields">
            <div class="inline field">
                <label for="search-username">用户名:</label>
                <input id="search-username" type="text" v-model="searchUser"></div>
            <div class="inline field">
                <label for="search-problem">题目:</label>
                <input id="search-problem" type="text" v-model="searchProblem"></div>
            <div class="inline field ui checkbox">
                <label for="search-result">仅通过:</label>
                <input type="checkbox" id="search-result" v-model="searchAC">
            </div>
            <button class="ui mini orange inverted button" id="search-submit"><i
                    class="search icon"></i>查找
            </button>
        </div>
    </form>
    <table class="ui selectable very compact inline striped center aligned table">
        <thead class="thead-light text-center">
        <tr>
            <th><i class="ui keyboard icon"></i>Run ID</th>
            <th><i class="ui user circle outline icon"></i>用户名</th>
            <th><i class="ui question circle outline icon"></i>题目</th>
            <th><i class="ui check circle outline icon"></i>结果</th>
            <th><i class="ui clock outline icon"></i>用时(ms)</th>
            <th><i class="ui microchip icon"></i>内存(KB)</th>
            <th><i class="ui file alternate outline icon"></i>代码长度</th>
            <th><i class="ui code icon"></i>语言</th>
            <th><i class="ui calendar alternate outline icon"></i>提交时间</th>
        </tr>
        </thead>
        <tbody class="text-center">
        <tr v-for="solution in solutions" v-bind:key="solution.id">
            <td>{{solution.id}}</td>
            <td>{{solution.user.username}}</td>
            <td><a v-bind:href="'/problems/'+solution.problem.id">{{solution.problem.id}}</a></td>
            <td class="view-code" v-bind:id="solution.id" v-bind:class="{
            positive:solution.result=='Accepted',
            warning:solution.result=='Pending',
            error:solution.result!='Accepted'&&solution.result!='Pending'
            }">{{solution.normalResult}}
            </td>
            <td>{{solution.time}}</td>
            <td>{{parseInt(solution.memory/1024)}}</td>
            <td>{{solution.length}}</td>
            <td><a class="view-code link item" v-bind:id="solution.id">{{solution.normalLanguage}}</a></td>
            <td>{{solution.normalSubmitTime}}</td>
        </tr>
        </tbody>
    </table>
    <div class="ui pagination menu">
        <pagination :class="{disabled:first}" content='<i class="angle double left icon"></i>'
                    v-on:change_page="get_page"
                    v-bind:to_page="0"></pagination>
        <pagination :class="{disabled:first}" content="<i class='angle left icon'></i>"
                    v-on:change_page="get_page" v-bind:to_page="number-1"></pagination>
        <div v-for="n in npage">
            <pagination :class="{active:number == n}" v-bind:content="n+1" v-on:change_page="get_page"
                        v-bind:to_page="n"></pagination>
        </div>
        <pagination :class="{disabled:last}" content='<i class="angle  right icon"></i>'
                    v-on:change_page="get_page" v-bind:to_page="number+1"></pagination>
        <pagination :class="{disabled:last}" content='<i class="angle double right icon"></i>'
                    v-on:change_page="get_page"
                    v-bind:to_page="totalPages-1"></pagination>
    </div>
</main>
<div class="ui large modal" id="codemodal">
    <div class="">
        <div class="" style="padding: 1rem;">
            <div class="ui header">
                <h4 class="">#<span id="modal-id"></span>&nbsp;用户名：<abbr id="modal-username"></abbr>&nbsp;题目：<abbr
                        id="modal-problem"></abbr></h4>
            </div>
            <div class="scrolling content">
                <table class="ui celled table">
                    <thead class="center aligned">
                    <tr>
                        <th><i class="ui check circle outline icon"></i>结果</th>
                        <th><i class="ui clock outline icon"></i>用时(ms)</th>
                        <th><i class="ui microchip icon"></i>内存(KB)</th>
                        <th><i class="ui file alternate outline icon"></i>代码长度</th>
                        <th><i class="ui code icon"></i>语言</th>
                        <th><i class="ui calendar alternate outline icon"></i>提交时间</th>
                    </tr>
                    </thead>
                    <tbody class="text center aligned">
                    <td id="modal-result">{{normalResult}}</td>
                    <td id="modal-time">{{time}}</td>
                    <td id="modal-memory">{{memory}}</td>
                    <td id="modal-length">{{length}}</td>
                    <td id="modal-language">{{normalLanguage}}</td>
                    <td id="modal-submit-time">{{normalSubmitTime}}</td>
                    </tbody>
                </table>
                <button class="ui button red" id="modal-share">
                    Not Shared
                </button>
                <pre id="modal-ce"></pre>
                <pre class="prettyprint" id="source_code"></pre>
            </div>
            <div class="actions">
                <button class="ui black deny button"><i class="close icon"></i>Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('.ui.checkbox').checkbox();

    function getRequest() {
        const url = location.search; //获取url中"?"符后的字串
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
            let str = url.substr(1);
            strs = str.split("&");
            for (let i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    seaRequest = getRequest();
    vue_solu = new Vue({
        el: "#vue-solutions",
        data: {
            solutions: [],
            totalElements: 0,
            totalPages: 0,
            last: true,
            number: 0,
            size: 50,
            numberOfElements: 0,
            first: true,
            empty: true,
            searchUser: "",
            searchAC: "",
            searchProblem: seaRequest['pid'] == undefined ? "" : seaRequest['pid'],
            npage: []
        },
        created: function () {
            var that = this;
            url = '/api/status';
            if (seaRequest['pid'] != undefined) {
                url += "?pid=" + that.searchProblem;
            }
            axios.get(url).then(function (res) {
                res = res.data.data;
                that.solutions = res.content;
                that.totalPages = res.totalPages;
                that.totalElements = res.totalElements;
                that.last = res.last;
                that.number = res.number;
                that.size = res.size;
                that.first = res.first;
                that.numberOfElements = res.numberOfElements;
                that.empyt = res.empty;
                that.npage = [];
                for (var i = Math.max(0, that.number - 3); i < Math.min(that.totalPages, that.number + 6); i++) {
                    that.npage.push(i)
                }
            })
        },
        methods: {
            get_page(page) {
                if (page >= this.totalPages || page < 0) return;
                var that = this;
                url = "/api/status?page=" + page + "&user=" + that.searchUser + "&pid=" + that.searchProblem + "&AC=" + that.searchAC;
                axios.get(url).then(function (res) {
                    res = res.data.data;
                    that.solutions = res.content;
                    that.totalPages = res.totalPages;
                    that.totalElements = res.totalElements;
                    that.last = res.last;
                    that.number = res.number;
                    that.size = res.size;
                    that.first = res.first;
                    that.numberOfElements = res.numberOfElements;
                    that.empyt = res.empty;
                    that.npage = [];
                    for (var i = Math.max(0, that.number - 5); i < Math.min(that.totalPages, that.number + 6); i++) {
                        that.npage.push(i)
                    }
                }).catch(function (e) {
                    console.log(e.response.data);
                })
            },
            search() {
                this.get_page(this.number)
            }
        }
    })
</script>
<footer th:replace="~{fragment/footer :: footer}"></footer>
</body>
</html>